<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <div v-if="crud.props.searchToggle">
        <!-- 搜索 -->
        <el-input v-model="query.value"
                  clearable
                  placeholder="输入搜索内容"
                  style="width: 200px;"
                  class="filter-item"
                  @keyup.enter.native="crud.toQuery" />
        <el-select v-model="query.type"
                   clearable
                   placeholder="类型"
                   class="filter-item"
                   style="width: 130px">
          <el-option v-for="item in queryTypeOptions"
                     :key="item.key"
                     :label="item.display_name"
                     :value="item.key" />
        </el-select>
        <rrOperation :crud="crud" />
      </div>
      <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
      <crudOperation :permission="permission"
                     :path="path"
                     :upload-url="uploadUrl" />
      <!--表格渲染-->
      <el-table border
                height="550"
                ref="table"
                v-loading="crud.loading"
                :data="crud.data"
                size="small"
                style="width: 100%;"
                @selection-change="crud.selectionChangeHandler">

        <el-table-column type="selection"
                         width="55" />
        <el-table-column v-if="columns.visible('projectName')"
                         prop="projectName"
                         label="项目名称" />
        <el-table-column v-if="columns.visible('projectStatus')"
                         prop="projectStatus"
                         label="项目状态">
          <template slot-scope="scope">
            {{ dict.label.ict_project_project_status[scope.row.projectStatus] }}
          </template>
        </el-table-column>
        <el-table-column v-if="columns.visible('firstType')"
                         prop="firstType"
                         label="项目类型（一级分类）">
          <template slot-scope="scope">
            {{ dict.label.ict_project_first_type[scope.row.firstType] }}
          </template>
        </el-table-column>
        <el-table-column v-if="columns.visible('secondType')"
                         prop="secondType"
                         label="项目类型（二级分类）">
          <template slot-scope="scope">
            {{ dict.label.ict_project_second_type[scope.row.secondType] }}
          </template>
        </el-table-column>
        <el-table-column v-if="columns.visible('industry')"
                         prop="industry"
                         label="行业">
          <template slot-scope="scope">
            {{ dict.label.ict_project_industry_type[scope.row.industry] }}
          </template>
        </el-table-column>
        <el-table-column v-if="columns.visible('attributive')"
                         prop="attributive"
                         label="项目归属">
          <template slot-scope="scope">
            {{ dict.label.ict_project_attributive[scope.row.attributive] }}
          </template>
        </el-table-column>

        <el-table-column v-if="columns.visible('contractAmount')"
                         prop="contractAmount"
                         label="合同金额（元）" />
        <el-table-column v-if="columns.visible('itManager')"
                         prop="itManager"
                         label="IT负责人" />
        <el-table-column v-if="columns.visible('ctManager')"
                         prop="ctManager"
                         label="CT负责人" />
        <el-table-column v-if="columns.visible('dtManager')"
                         prop="dtManager"
                         label="DT负责人" />
        <el-table-column v-if="columns.visible('businessOffice')"
                         prop="businessOffice"
                         label="办事处" />

        <el-table-column fixed="right"
                         v-permission="['admin','ictProject:edit','ictProject:del']"
                         label="操作"
                         width="150px"
                         align="center">
          <template slot-scope="scope">
            <udOperation :path="path"
                         :data="scope.row"
                         :permission="permission" />
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <pagination />
    </div>
  </div>
</template>

<script>
import crudIctProject from '@/api/ict/ictProject/ictProject'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.ict'
import udOperation from '@crud/UD.ict'
import pagination from '@crud/Pagination'

// crud交由presenter持有
const defaultCrud = CRUD({ title: 'ICT项目', url: 'api/ictProject', sort: 'id,desc', crudMethod: { ...crudIctProject } })
const defaultForm = { id: null, projectName: null, clientName: null, scale: null, content: null, firstType: null, secondType: null, industry: null, attributive: null, startDate: null, developmentRoomContact: null, developmentRoomContactInformation: null, isFrameSupports: null, supportUnit: null, competitorProfile: null, projectStatus: null, contractTitle: null, contractAmount: null, signingDate: null, deliveryPeriodDate: null, completionPeriodDate: null, isDelivered: null, notDeliveredReason: null, implementationProgress: null, businessProgress: null, maintenanceRequirements: null, isMiddleSelection: null, selectedPartner: null, implementationPartner: null, implementPartnerContact: null, implementPartnerContactInformation: null, postingDate: null, priceSummaryReleaseDate: null, orderFilingDate: null, isInitialTest: null, clientInitialTestDate: null, clientFinalTestDate: null, freeMaintenancePeriodDate: null, maintenanceDeadline: null, customerSideProgress: null, partnerSideProgress: null, recentProgress: null, nextPlan: null, partnerFinalTestNumber: null, createDate: null, createBy: null, updateDate: null, updateBy: null, submitDate: null, submitBy: null, delFlag: null, projectManager: null, annex: null, itManager: null, ctManager: null, dtManager: null, itAmount: null, ctAmount: null, dtAmount: null, ifzFlag: null, ifBigData: null, customSatisfaction: null, preScheduleAnnex: null, professionalSatisfaction: null, serviceSatisfaction: null, provinceCode: null, paymentMode: null, businessMode: null, customMode: null, partnerMode: null, businessOffice: null, isComplain: null, isFault: null, customerManager: null, historyProgree: null, partnerInitialTestNumber: null }
export default {
  name: 'IctProject',
  components: { pagination, crudOperation, rrOperation, udOperation },
  mixins: [presenter(defaultCrud), header(), form(defaultForm), crud()],
  dicts: ['ict_project_first_type', 'ict_project_second_type', 'ict_project_attributive', 'ict_project_is_frame_supports', 'ict_project_project_status', 'ict_project_is_delivered', 'ict_project_implementation_progress', 'ict_project_business_progress', 'ict_project_is_middle_selection', 'ict_project_is_initial_test', 'ict_project_customer_side_progress', 'ict_project_partner_side_progress', 'ict_project_ifZ', 'ict_project_ifBigData', 'ict_project_customMode', 'ict_project_partnerMode', 'ict_project_isComplain', 'ict_project_isComplain', 'ict_project_industry_type'],
  data() {
    return {
      path: '/ict/ictProjectManager/projectManager/form',
      uploadUrl: '/api/ictProject/import',
      permission: {
        add: ['admin', 'ictManager', 'ictProject:add'],
        edit: ['admin', 'ictManager', 'ictProject:edit'],
        del: ['admin', 'ictManager', 'ictProject:del']
      },
      rules: {
      },
      queryTypeOptions: [
        { key: 'projectName', display_name: '项目名称' }
      ]
    }
  },
  methods: {
    // 获取数据前设置好接口地址
    [CRUD.HOOK.beforeRefresh]() {
      const query = this.query
      if (query.type && query.value) {
        this.crud.params[query.type] = query.value
      }
      return true
    }
  }
}
</script>

<style scoped>
</style>
